import React from 'react';
import { toJS } from 'mobx';
import { observer, inject } from 'mobx-react';
import {
  WeaDialog,
  WeaLocaleProvider,
  WeaTab,
  WeaTable,
  WeaAvatar,
  WeaInputSearch,
  WeaPopoverHrm
} from 'ecCom';
import {
  Button,
  Modal,
  Popover,
  Icon
} from 'antd';
import SetGroupNoWriteDialog from './SetGroupNoWrite';
import AddSharePeopleDialog from './AddSharePerson';
import GroupPerson from './GroupPerson';
import { userType } from './constants';
import Loading from './Loading';
import classNames from 'classnames';
import './index.less';

const confirm = Modal.confirm;
const getLabel = WeaLocaleProvider.getLabel;

@inject('edcAddShareStore', 'edcSetGroupNoWriteStore')
@observer
export default class AddShareDialog extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      filerVal: ''
    }
    this.store = props.edcAddShareStore;
    props.visible && this.store.init(props.appid);
  }

  componentWillReceiveProps(nextProps) {
    const { init } = this.store;

    if (nextProps.visible && nextProps.visible !== this.props.visible) {
      this.setState({ filerVal: '' });
      init(nextProps.appid);
    }
  }

  columns = [{
    title: getLabel(527036,'用户'),
    dataIndex: 'name',
    key: 'name',
    render: (text, record) => {
      if (record.type === userType.USER) {
        return (
          <div className='person-info'>
            <div className='avatar'>
              <WeaAvatar ecId={`${this && this.props && this.props.ecId || ''}_WeaAvatar@v33yif@${record.id}`} userId={record.id} isGroup={false} />
            </div>
            <span>
              <span>
                <a 
                  href={`javaScript:openhrm(${record.id})`}
                  onClick={e => window.pointerXY(e)}
                >
                  {record.name}
                </a>
              </span>
              <span className='person-info-detail'>{record.departmentName}</span>
            </span>
          </div>
        )
      } else if (record.type === userType.CHATGROUP) {
        return (
          <div className='person-info'>
            <div className='avatar'>
              <WeaAvatar ecId={`${this && this.props && this.props.ecId || ''}_WeaAvatar@bue4w3@`} isGroup={true} url={record.icon}/>
            </div>
            <span>
              <span>
                <Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@k7rx0g`} 
                  placement="bottom" 
                  trigger="click"
                  overlayClassName='wea-edc-group-person'
                  content={
                    <GroupPerson ecId={`${this && this.props && this.props.ecId || ''}_GroupPerson@em018k`} 
                      pkId={record.pkId} 
                      id={record.id} 
                    />
                  }
                > 
                  <a>
                    {record.name}
                  </a>
                </Popover>
              </span>
                <span className='person-info-detail'>
                  <span>{record.memberSize}{getLabel('500497','人') }</span>
                  { record.exceptMember?
                    <span> {getLabel(527102,'不参与填写人员')}：{record.exceptMember}
                    </span> : null
                  }
              </span>
            </span>
          </div>
        )
      } else if (record.type === userType.DEPARTMENT || record.type === userType.SUBCOMPANY) {
        const type = record.type === userType.DEPARTMENT ? 'department' : 'subcompany';

        return (
          <div className='person-info'>
            <div className='avatar'>
              <WeaAvatar ecId={`${this && this.props && this.props.ecId || ''}_WeaAvatar@0e9lv1`} type='1' name={record.name} isGroup={true}/>
            </div>
            <span>
              <span>
                <a href={`/spa/hrm/engine.html#/hrmengine/organization?showTree=false&isView=1&type=${type}&id=${record.id}`} target='_blank'>
                  {record.name}
                </a></span>
              <span className='person-info-detail'>
                {record.memberSize}{getLabel('500497','人') }
              </span>
            </span>
          </div>
        )
      }
    },
    }, {
      title: getLabel(527037,'类型'),
      dataIndex: 'typeName',
      key: 'typeName',
      width: 160,
      render: (text) => <span>{text}</span>
    }, {
      title: <span className='wea-edc-add-share-operation'>{getLabel(527038,'操作')}</span>,
      key: 'operation',
      width: 250,
      render: (text, record) => (
        <span className='operation'>
          { record.type === userType.CHATGROUP ?
            <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_undefined@snvqhr@`}>
              <span onClick={() => {
                this.store.showSetGroupNoWriteDialog();
                this.props.edcSetGroupNoWriteStore.init(record.pkId, record.id);
              }}>{getLabel('528009','设置不需填写的人员')}</span>
            </React.Fragment> : null 
          }
          <span
            className={record.type === userType.USER ? 'del' : ''}
            onClick={() => this.delSubmitMember(record.id, record.type)}
          >
            {getLabel('91','删除') }
          </span>
        </span>
      ),
    }];

  delSubmitMember = (id, type) => {
    const { delSubmitMember } = this.store;

    confirm({
      title: getLabel(527039,'删除'),
      content: getLabel(527040,'您是否确认要删除'),
      onOk() {
        delSubmitMember(id, type);
      }
    });
  }

  getData = () => {
    const { filerVal } = this.state;
    const { browsers } = this.store;
    const data = [];

    toJS(browsers).forEach(browser => {
      if (browser.type === userType.USER) {
        data.push({
          departmentName: browser.departmentName,
          icon: browser.icon,
          name: browser.name,
          id: browser.id,
          type: browser.type,
          typeName: getLabel(527041,'人员')
        });
      } else if (browser.type === userType.CHATGROUP) {
        data.push({
          name: browser.name,
          memberSize: browser.memberSize,
          exceptMember: browser.exceptMember,
          exceptMemberSize: browser.exceptMemberSize,
          icon: browser.icon,
          pkId: browser.pkId,
          type: browser.type,
          typeName: getLabel(527042,'群组'),
          id: browser.id
        })   
      } else if (browser.type === userType.DEPARTMENT || browser.type === userType.SUBCOMPANY) {
        const typeName = browser.type === userType.DEPARTMENT ? getLabel(527043,'部门') : getLabel(527044,'分部');

        data.push({
          name: browser.name,
          memberSize: browser.memberSize,
          id: browser.id,
          type: browser.type,
          typeName: typeName
        })
      }
    });

    return data.filter(data => !!~data.name.indexOf(filerVal));
  }

  onSearch = value => {
    this.setState({ filerVal: value });
  }

  render () {
    const { visible, onCancel } = this.props;
    const {
      browsers,
      settingDialogVisible,
      hideSetGroupNoWriteDialog,
      addDialogVisible,
      hideAddShareDialog,
      showAddShareDialog,
      onSure,
      hasInit
    } = this.store;

    return (
      <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@06oesw`}
        title={getLabel(527035,'指定可填写的用户')}
        className='wea-edc-addshare'
        icon={"icon-coms02-Data-center"}
        iconBgcolor = "#1a57a0"
        hasScroll
        confirmLoading={true}
        visible={visible}
        onCancel={onCancel}
        style={{ width: 800, height: 680 }}
        destroyBodyOnClose={true}
      >
        <div className='content'>
          {
            hasInit ?
            <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_undefined@fwl2x5`}>
              <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@67osmi`}     
                buttons={[
                  <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@5fm2th@`} onSearch={this.onSearch} />,
                  <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@zyivue@`} type="primary" title={getLabel('505959','新增')} onClick={showAddShareDialog}>{getLabel('505959','新增')}</Button>
                ]}
              >
              </WeaTab>
              <WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@a28zti`} inDialog={true} />
              <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@etxd0x`} 
                columns={this.columns} 
                dataSource={this.getData()}
                scroll={{ y: 522 }}
              />
            </React.Fragment> :
            <Loading ecId={`${this && this.props && this.props.ecId || ''}_Loading@kiyt86`} loading={true} content={getLabel(527046,'加载中...')} />
          }
          <SetGroupNoWriteDialog ecId={`${this && this.props && this.props.ecId || ''}_SetGroupNoWriteDialog@uk2l8q`} 
            visible={settingDialogVisible}
            onCancel={hideSetGroupNoWriteDialog}
          />
          <AddSharePeopleDialog ecId={`${this && this.props && this.props.ecId || ''}_AddSharePeopleDialog@pn2u2m`} 
            visible={addDialogVisible}
            onCancel={hideAddShareDialog}
          />
        </div>
      </WeaDialog>
    )
  }
}